<template>
<!-- 项目组件 每一个商品 -->
    <div class="product">
        <div v-show="product.isHot"> <i class="iconfont icon-hot2"></i></div>
        <div class="product-img"><img :src="product.smallImg" alt=""></div>
        <div class="product-zhname one-text">{{product.name}}</div>
        <div class="product-enname one-text">{{product.enname}}</div>
        <div class="product-price one-text">&yen;{{product.price}}</div>
        
    </div>
</template>
<script>
export default {
        data() {
            return {
                
            }
        },
        props:{
            product:{
                type:Object,
                // 默认值 当属性的值为数组或对象的时候，默认值需要函数返回
                default(){
                    return {};
                }
            }
        }
}
</script>
<style lang="less">
.product{
    position: relative;
}
.icon-hot2{
    color: #0c34ba;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 28px;
    // background-color: #fff;
}
.product-img{
    height: 120px;
    img{
        width: 100%;
    }
}
.product-zhname{
    font-size: 14px;
    margin-top: 20px;
}
.product-enname{
    color: #999;
    font-size: 14px;
}
.product-price{
    color: #e4393c;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

</style>